<template>
  <!-- 路由的默认显示 -->
  <div class="home_container">
    <button @click="add">点击自增</button>
    <!-- 获取数据 -->
    <b>{{ count }}</b>
    <h6>{{ $store.state.id }}</h6>
    <button @click="toDetail">点击跳转详情页</button>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  components: {},
  data() {
    return {};
  },
  // 使用vuex 维护状态 数据统一管理 创建 ->修改-> 更新 -> 销毁等一系列的操作
  //
  methods: {
    ...mapMutations(["setCount"]),
    add() {
      // console.log(this);
      // 点加加价vuex中的数据
      // this.$store.state.count++; 不建议这么写
      /*
      1.调用vuex中 state中的数据count
        方式一: this.$store.state.count
        方式二 ：在computed中  ...mapState(["count"]) 数据映射到计算属性中
       这是调用vuex中mutations的方法的 
       方式一 : this.$store.commit("setCount");
       方式二 : 在方法methods中   ...mapMutations(["setCount"]), 
      */
      // this.$store.commit("setCount");
      this.setCount();
    },
    toDetail() {
      console.log(this);
      this.$router.push("/detail");
    },
  },
  created() {},
  computed: {
    ...mapState(["count"]),
  },
};
</script>

<style>
</style>